<template>
	<view class="order-map">
		<map id="orderMap" :longitude="centerAddress.lng" :latitude="centerAddress.lat" :markers="markers" style="width: 100%;"></map>
	</view>
</template>

<script>
import common from '../../../utils/common.js';
export default {
	name: 'OrderMap',
	data() {
		return {
			distance: -1,
			showDistance: false,
			numberStyle: '',
			markers: []
		};
	},
	props: ['centerAddress', 'start', 'end','distanceNum'],
	watch: {
		start: {
			immediate: true,
			handler (val) {
				this.addMarkers()
			}
		},
		end: {
			immediate: true,
			handler (val) {
				if (!val) return 
				console.log('确认订单页 结束地址', this.end, this.isShowBuyStart, val)
				this.addMarkers()
			}
		},
		distanceNum: {
			immediate: true,
			handler (val) {
				if (!val) return 
				this.addMarkers()
			}
		}
	},
	mounted() {
		this.mapContext = uni.createMapContext('orderMap', this)
	},
	methods: {
		addMarkers () {
			let arr = []
			if (this.end) {
				let obj = {
					longitude: this.end.formartLng,
					latitude: this.end.formartLat,
					iconPath: '/pages/runErrands/static/images/end.png',
					width: 30,
					height: 30
				}
				if (this.distanceNum-0) {
					obj.callout = {
						content: `${(this.distanceNum-0).toFixed(1)}公里`,
						color: '#ffffff',
						fontSize: 12,
						borderRadius: 10,
						bgColor: '#000000',
						padding: 5,
						display: 'ALWAYS'
					}
				}
				arr.push(obj)
			}
			if (this.start) {
				arr.unshift({
					longitude: this.start.formartLng,
					latitude: this.start.formartLat,
					iconPath: '/pages/runErrands/static/images/send.png',
					width: 30,
					height: 30
				})
			}
			this.markers = arr
			console.log('确认订单页地图markers', arr)
			this.$forceUpdate()
			this.updateMaekers()
		},
		updateMaekers() {
			console.log('确认订单页地图 masrker', this.markers)
			let _this = this
			if (_this.markers.length > 0) {
				setTimeout(function(){
					_this.mapContext.includePoints({points: _this.markers, padding: [10, 10, 10, 10]})
				}, 500)
			}
		},
		mapHandler({ BMap, map }) {
			this.showDistance = true;
			if (this.start && this.end) {
				this.getDistance();
				var viewportOptions = {
					zoomFactor: -1
				};
				this.nowMap = map.getViewport([this.start.point, this.end.point], viewportOptions);
				return;
			}
			this.nowMap.center = this.start ? this.start.point : this.end.point;
			this.nowMap.zoom = 15;
		},
		draw({ el, BMap, map }) {
			const pixel = map.pointToOverlayPixel(new BMap.Point(this.end.formartLng, this.end.formartLat));
			el.style.left = pixel.x - 15 + 'px';
			el.style.top = pixel.y - 15 + 'px';
		},
		getDistance() {
			let distanceParam = {
				end_lat: this.end.point.lat,
				end_lng: this.end.point.lng,
				start_lat: this.start.point.lat,
				start_lng: this.start.point.lng,
				plugin: true
			};
			common.post('paotui&c=Paotui&a=get_distance', distanceParam, res => {
				_this.distance = res.distance.toFixed(2);
				_this.$nextTick(() => {
					let width = _this.$refs.number.clientWidth;
					let left = (width / 2 - 15).toFixed(2);
					_this.numberStyle = `left:${-left}PX`;
				});
			});
		}
	}
};
</script>

<style lang="stylus" scoped>
.order-map
	.bm-view
		height 175px
		.distance
			position absolute
			top 0
			left 0
			.number
				white-space nowrap
				padding 8PX 10PX
				font-size 12PX
				background #000000
				color #ffffff
				border-radius 8PX
				position absolute
				top -38PX
				left -18PX
				.icon
					position absolute
					left 0
					right 0
					bottom -10PX
					color #000000
					text-align center
			.img
				width 30PX
</style>
